<template>
  <div class="page-container">
    <KnHeader></KnHeader>
    <el-row class="main-content">
      <!-- 树形结构部分 -->
      <el-col :span="4" class="sidebar">
        <div class="tree-card">
          <el-tree :data="docsTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"
            class="tree-view"></el-tree>
        </div>
      </el-col>
      <!-- 富文本部分 -->
      <el-col :span="20" class="content">
        <div class="rich-text-container" v-html="plainText"></div>
        <div class="content-dianzan"><el-button type="primary" @click="doLike(docContent.id)">点赞</el-button></div>
      </el-col>
      
      <div>
    <span>{{ docContent.name }}</span>
    <el-divider direction="vertical"></el-divider>
    <span>阅读量:{{ docContent.viewCount }}</span>
    <el-divider direction="vertical"></el-divider>
    <span>点赞量:{{ docContent.voteCount }}</span>
  </div>
    </el-row>
   
  </div>
</template>

<script>
import { getDocTree ,doLike} from '@/apis/docApi.js';
import KnHeader from '@/components/KnHeader.vue';
import { getContentById } from '@/apis/contentApi.js';

export default {
  components: {
    KnHeader,
  },
  props: {},
  data() {
    return {
      ebookId: this.$route.params.ebookId, // 接收路径参数 id
      docsTree: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      plainText: '',
      docContent:{}
    };
  },
  methods: {
    async doLike(docId){
      console.log(this.$store.state.userInfo);
      let username = this.$store.state.userInfo.username
      if(username){
        if(!docId){
          return
        }
        let res = await doLike(this.ebookId,docId,username)
        console.log(res);
        if(res.data.status===200){
          this.$message({
            type: 'success',
            message: '点赞成功!'
          })
        }else{
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      }else{
        this.$message.error('请先登录')
      }
      // let res = await doLike(this.ebookId,docId)
      // console.log(res);
    },
    async getDocTreeVue() {
      let res = await getDocTree(this.ebookId);
      console.log(res);
      this.docsTree = res.data.data;
    },
    async handleNodeClick(data) {
      console.log("data===>", data);
      this.docContent = data
      let res = await getContentById(data.id);
      console.log(res);
      this.plainText = res.data.data.content;
    },
  },
  created() {
    this.getDocTreeVue();
  },
};
</script>

<style scoped>
.content-dianzan{
  margin-top: 10px;
  text-align: center;
}
/* 全局样式 */
body {
  background-color: #f5f7fa;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

/* 页面容器 */
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 主内容区域 */
.main-content {
  display: flex;
  gap: 20px;
  /* 树形结构和内容之间的间距 */
}

/* 树形结构侧边栏 */
.sidebar {
  flex: 0 0 200px;
  /* 固定宽度 */
}

.tree-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
  /* 树形结构内容过多时允许滚动 */
}

.tree-view {
  padding: 10px;
}

/* 富文本内容区域 */
.content {
  flex: 1;
  /* 占据剩余空间 */
}

.rich-text-container {
  max-height: 100px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee;
}

.rich-text-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.rich-text-container a {
  color: #409eff;
  text-decoration: none;
}

.rich-text-container a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    flex: 0 0 auto;
    margin-bottom: 20px;
  }
}
</style>